<template>
	<view class="region">
		<picker mode="multiSelector" @cancel="cancels" :range="range" range-key="name" @change="change"
			@columnchange="columnchange" :value="value" class="picker">
			<view class="content">
				<slot></slot>
			</view>
		</picker>
	</view>
</template>

<script>

	export default {
		name: 'chose-cate',
		props: {
			cateList: {
				type: Array,
				default: () => {
					return [];
				},
			},
			// 默认值
			defaultValue: {
				type: Array,
				default () {
					return null;
				}
			}
		},
		data() {
			return {
				range: [
					[],
					[],
					// []
				], // 省/市/区
				value: [0, 0], // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['一级', '一级的二级', '一级的二级的三季']
				regionStr: '' // 选中的省市区字符串
			};
		},
		watch: {
			// 默认值
			defaultValue() {
				// 设置/更新省市区数据
				this.defaultValue ? this.setDefaultValue() : this.setRange();
			}
		},
		
		/**
		 * 组件初次加载完成
		 */
		mounted() {
			// 设置/更新省市区数据
			setTimeout(() => {
				this.defaultValue ? this.setDefaultValue() : this.setRange();
			}, 500)
		},
		
		methods: {
			/**
			 * 设置/更新需求类型数据
			 */
			setRange() {
				// 需求类型数据
				let range = [
					[],
					[],
					// []
				];

				// 一级
				this.cateList.forEach(el => {
					range[0].push({
						id: el.id,
						name: el.name
					});
				});

				// 二级
				this.cateList[this.value[0]].two.forEach(el => {
					range[1].push({
						id: el.id,
						name: el.name
					});
				});

				// 三级
				// this.cateList[this.value[0]].two[this.value[1]].third.forEach(el => {
				// 	range[2].push({
				// 		id: el.id,
				// 		name: el.name
				// 	});
				// });

				// 更新数据
				this.range = range;
			},

			/**
			 * 设置默认值
			 */
			setDefaultValue() {
				// 查找省
				let provinceIndex = this.cateList.findIndex(el => {
					return el.name == this.defaultValue[0];
				});
				provinceIndex >= 0 ? {} : (provinceIndex = 0);

				// 查找市
				let cityIndex = this.cateList[provinceIndex].two.findIndex(el => {
					return el.name == this.defaultValue[1];
				});
				cityIndex >= 0 ? {} : (cityIndex = 0);

				// 查找区
				// let areaIndex = this.cateList[provinceIndex].two[cityIndex].third.findIndex(el => {
				// 	return el.name == this.defaultValue[2];
				// });
				// areaIndex >= 0 ? {} : (areaIndex = 0);

				// 更新 value 的值
				this.value = [provinceIndex, cityIndex];

				// 设置/更新省市区数据
				this.setRange();

				// 更新选中的省市区字符串
				this.regionStr =
					this.cateList[provinceIndex].name + '·' + this.cateList[provinceIndex].two[cityIndex].name 
					// + '·' +this.cateList[provinceIndex].two[cityIndex].third[areaIndex].name;
			},

			/**
			 * 某一列的值改变时触发
			 * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
			 * @param {Number} event.detail.value 表示变更值的下标
			 */
			columnchange(event) {
				// 改变的是一级
				if (event.detail.column == 0) {
					this.value = [event.detail.value, 0, 0];
				}
				// 改变的是二级
				if (event.detail.column == 1) {
					this.value.splice(1, 1, event.detail.value);
					this.value.splice(2, 1, 0);
				}
				// 改变的是三级
				// if (event.detail.column == 2) {
				// 	this.value.splice(2, 1, event.detail.value);
				// }
				// 设置/更新省市区数据
				this.setRange();
			},

			/**
			 * 确认选择
			 */
			change(event) {
				// 更新选中的省市区字符串
				this.regionStr = this.range[0][this.value[0]].name + '·' + this.range[1][this.value[1]].name 
				// + '·' + this.range[2][this.value[2]].name;

				// 传递事件
				this.$emit('change1', [this.range[0][this.value[0]], this.range[1][this.value[1]]]);
				// , this.range[2][this.value[2]]
			},
			cancels() {
				this.$emit('changes1')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		text-align: right;
	}

	/* 文本多出部分用省略号表示 */
	.ellipsis-1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.placeholder {
		color: #949596;
	}
</style>
